<template>
  <div class="form-box">
    <!-- 论坛选择 -->
    <div class="template-container">
      <div v-if="item.orderNum<item.bbsNum" @click="seletcItem(item)" :class="{'thisSelect':thisSelect.bbsId===item.bbsId}" v-for="(item,index) of $store.state.forumList" :key="index" class="big-box">
        <div class="tit">
          {{item.bbsName}}
        </div>
        <div v-if="item.orderNum>=item.bbsNum" class="tit-state">
          已全部预约
        </div>
        <!-- <div v-else class="tit-state">
          已预约{{ item.orderNum || 0 }}
        </div> -->
      </div>
    </div>
    <!-- 确定 -->
    <div v-if="$store.state.forumList.length!=0" class="submit-form-box">
      <div @click="sureSelect()" class="submit-form">
        确定
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      thisSelect: {
        bbsName: "",
        bbsId: ""
      }
    };
  },
  created() {
    this.getForumList();
  },
  methods: {
    // 得到论坛数据
    getForumList() {
      let dataUrlParam = JSON.parse(sessionStorage.getItem("urlParam"));
      this.$Indicator.open({
        text: "获取最新数据中",
        spinnerType: "fading-circle"
      });
      this.$http
        .post("/api/isv/signUp/queryForum", {
          activityId:
            this.$store.state.urlParam.activityId || dataUrlParam.activityId,
          corpId: this.$store.state.urlParam.corpId || dataUrlParam.corpId
        })
        .then(
          res => {
            this.$Indicator.close();
            if (res.data.success) {
              this.$store.state.forumList = res.data.result;
            } else {
              this.$Toast({
                message: res.data.errorMsg || "最新论坛数据获取失败",
                position: "middle",
                duration: 3000
              });
            }
          },
          err => {
            this.$Indicator.close();
            this.$Toast({
              message: "最新数据获取失败",
              position: "middle",
              duration: 3000
            });
          }
        );
    },
    // 选择某一项
    seletcItem(item) {
      if (item.orderNum >= item.bbsNum) {
        this.$Toast({
          message: "当前论坛已全部预约",
          position: "middle",
          duration: 3000
        });
        return;
      }

      this.thisSelect.bbsName = item.bbsName;
      this.thisSelect.bbsId = item.bbsId;
    },
    sureSelect() {
      if (!this.thisSelect.bbsId) {
        this.$Toast({
          message: "请选择论坛",
          position: "middle",
          duration: 3000
        });
        return;
      }
      let formList = this.$store.state.formList;
      for (let i = 0; i < formList.length; i++) {
        if (this.$store.state.thisEditTemplateId == formList[i].templateId) {
          for (let j = 0; j < formList[i].componenList.length; j++) {
            if (formList[i].componenList[j].attribute.filedCode == "bbsId") {
              this.$store.state.formList[i].componenList[
                j
              ].attribute.filedValue = this.thisSelect.bbsId;
              this.$store.state.formList[i].componenList[
                j
              ].attribute.filedValuebbsname = this.thisSelect.bbsName;
            }
          }
        }
      }
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.submit-form-box {
  position: fixed;
  bottom: 0rem;
  left: 0rem;
  width: 100%;
  height: 5rem;
  z-index: 99;
  background: #ffffff;
  border-top: 0.1rem solid #dedede;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.submit-form {
  background: #ff3e85;
  font-size: 1.4rem;
  color: #ffffff;
  width: 69%;
  height: 3.5rem;
  line-height: 3.5rem;
  cursor: pointer;
}
.submit-form:active {
  background: rgba(249, 29, 112, 0.6);
}
.form-box {
  width: 100%;
  height: 100%;
  background: #f4f5f4;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.template-container {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 0rem 1.2rem;
}
.template-container > div:first-of-type {
  border: none;
}
.template-container > div:last-of-type {
  margin-bottom: 6.6rem;
}
.big-box {
  width: 100%;
  height: auto;
  position: relative;
  border-top: 0.1rem solid #ededed;
  cursor: pointer;
  /* padding: 0.6rem 0rem; */
}
.tit {
  width: 100%;
  height: auto;
  padding-right: 6.6rem;
  min-height: 3.8rem;
  font-size: 1.3rem;
  color: #3a3a3a;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: left;
}
.tit-state {
  position: absolute;
  right: 0rem;
  top: 0rem;
  height: 100%;
  width: 6rem;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1.1rem;
  color: #ff3e85;
}
.thisSelect {
  background: rgba(252, 57, 130, 0.1);
}
</style>

